<template>
  <div class="dashboard">
    <div class="container">
      <!-- 左侧内容 -->
      <div class="left">
        <div class="panel">
          <!-- 个人信息 -->
          <div class="user-info">
            <img class="avatar" src="@/assets/111.jpeg" alt="">
            <div class="company-info">
              <div class="title">
                智能光伏管理系统
                <span>体验版</span>
              </div>
              <div class="depart">肖瑜</div>
            </div>
          </div>
          <!-- 代办 -->
          <div class="todo-list">
            <div class="todo-item">
              <span>发电功率(瓦)</span>
              <!-- 起始值 终点值  滚动时间 -->
              <count-to
                :start-val="0"
                :end-val="228"
                duration="1000"
              />
            </div>
            <div class="todo-item">
              <span>节能指数(%)</span>
              <count-to
                :start-val="0"
                :end-val="43"
                duration="1000"
              />
            </div>
            <div class="todo-item">
              <span>累计发电量(瓦)</span>
              <count-to
                :start-val="0"
                :end-val="345"
                duration="1000"
              />
            </div>
          </div>
        </div>
        <!-- 快捷入口 -->
        <!-- <div class="panel">
          <div class="panel-title">快捷入口</div>
          <div class="quick-entry">
            <div class="entry-item">
              <div class="entry-icon approval" />
              <span>假期审批</span>
            </div>
            <div class="entry-item">
              <div class="entry-icon social" />
              <span>社保管理</span>
            </div>
            <div class="entry-item">
              <div class="entry-icon role" />
              <span>角色管理</span>
            </div>
            <div class="entry-item">
              <div class="entry-icon salary" />
              <span>薪资设置</span>
            </div>
            <div class="entry-item">
              <div class="entry-icon bpm" />
              <span>流程设置</span>
            </div>
          </div>
        </div> -->
        <!-- 图表数据 -->
        <div class="panel">
          <div class="panel-title">家庭用电情况</div>
          <div class="chart-container">
            <div class="chart-info">
              <div class="info-main">
                <span>本周用电量</span>
                <count-to
                  :start-val="0"
                  :end-val="223"
                  duration="1000"
                />

              </div>
              <div class="info-list">
                <div class="info-list-item">
                  <span>电表1(瓦)</span>
                  <count-to
                    :start-val="0"
                    :end-val="117"
                    duration="1000"
                  />
                </div>
                <div class="info-list-item">
                  <span>电表2(瓦)</span>
                  <count-to
                    :start-val="0"
                    :end-val="12"
                    duration="1000"
                  />
                </div>
                <div class="info-list-item">
                  <span>电表3(瓦)</span>
                  <count-to
                    :start-val="0"
                    :end-val="24"
                    duration="1000"
                  />
                </div>
              </div>
            </div>
            <div class="chart">
              <!-- 图表 -->
              <div ref="social" style=" width: 100%; height:100% " />
            </div>
          </div>
        </div>
        <!-- 图表数据 -->
        <div class="panel">
          <div ref="provident" class="panelChart" style=" width: 100%; height:100% " />
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="right">
        <!-- 帮助链接 -->
        <div class="panel">
          <div class="help">
            <div class="help-left">
              <div class="panel-title">帮助链接</div>
              <div class="help-list">
                <div class="help-block">
                  <i class="icon-entry" />
                  入门指南
                </div>
                <div class="help-block">
                  <i class="icon-help" />

                  <a
                    target="_blank"
                    href="https://wenku.baidu.com/view/4d231e785bfb770bf78a6529647d27284b73379b.html?_wkts_=1681115144036&bdQuery=%E5%85%89%E4%BC%8F%E4%BD%BF%E7%94%A8%E5%9C%A8%E7%BA%BF%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C"
                  >
                    在线帮助手册</a>
                </div>
                <div class="help-block" @click="mbp">
                  <i class="icon-support" />
                  联系技术支持
                </div>
                <div class="help-block">
                  <i class="icon-add" />
                  添加链接
                </div>
              </div>
            </div>
            <div class="help-right">
              <div class="calendar">
                <!-- <el-calendar /> -->
                <el-calendar />
              </div>
            </div>
          </div>
        </div>
        <!-- 通知公告 -->
        <div class="panel">
          <div class="panel-title">能源管理建议</div>
          <div class="information-list">
            <div class="information-list-item">
              <img src="@/assets/common/img.webp" alt="">
              <div>
                <p>
                  <span class="col">提醒</span> 避免在高温或低温环境下使用光伏板，以避免影响其性能和寿命。
                </p>
                <p>2032-07-21 15:21:38</p>
              </div>
            </div>
            <div class="information-list-item">
              <img src="@/assets/common/img.webp" alt="">
              <div>
                <p>
                  <span class="col">提醒</span> 有一块电池出现储电问题。
                </p>
                <p>2032-07-21 15:21:38</p>
              </div>
            </div>
            <div class="information-list-item">
              <img src="@/assets/common/img.webp" alt="">
              <div>
                <p>
                  <span class="col">提醒</span> 定期检查和维护光伏板系统，确保其正常运行。
                </p>
                <p>2032-07-21 15:21:38</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 天气预报 -->
        <div class="panel">
          天气预报
          <div class="tianqi">
            <Weather />
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Weather from './weather.vue'
import CountTo from 'vue-count-to'
import * as echarts from 'echarts'
// import axios from 'axios'

// 引入柱状图图表，图表后缀都为 Chart
import { LineChart, PieChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components'

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  LineChart,
  PieChart,
  GridComponent,
  CanvasRenderer,
  DatasetComponent,
  TransformComponent
])

// 接下来的使用就跟之前一样，初始化图表，设置配置项
// var myChart = echarts.init(document.getElementById('main'))
// myChart.setOption({
//   // ...
// })

export default {
  components: {
    CountTo,
    Weather
  },

  mounted() {
    this.social = echarts.init(this.$refs.social)
    this.provident = echarts.init(this.$refs.provident)

    this.social.setOption({
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [11, 24, 21, 22, 43, 21, 12],
          type: 'line',
          areaStyle: {}
        }
      ]
    })

    this.provident.setOption({
      title: {
        text: '配电表',
        subtext: 'Fake Data'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        // prettier-ignore
        data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} W'
        },
        axisPointer: {
          snap: true
        }
      },
      visualMap: {
        show: false,
        dimension: 0,
        pieces: [
          {
            lte: 6,
            color: 'green'
          },
          {
            gt: 6,
            lte: 8,
            color: 'red'
          },
          {
            gt: 8,
            lte: 14,
            color: 'green'
          },
          {
            gt: 14,
            lte: 17,
            color: 'red'
          },
          {
            gt: 17,
            color: 'green'
          }
        ]
      },
      series: [
        {
          name: '电',
          type: 'line',
          smooth: true,
          // prettier-ignore
          data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
          markArea: {
            itemStyle: {
              color: 'rgba(255, 173, 177, 0.4)'
            },
            data: [
              [
                {
                  name: '早高峰',
                  xAxis: '07:30'
                },
                {
                  xAxis: '10:00'
                }
              ],
              [
                {
                  name: '晚高峰',
                  xAxis: '17:30'
                },
                {
                  xAxis: '21:15'
                }
              ]
            ]
          }
        }
      ]
    })
  },

  methods: {
    mbp() {
      this.$notify({
        title: '请联系技术人员：',
        message: '13800000002',
        offset: 100
      })
    }
    // async get() {
    //   const res = await axios.get('https://geoapi.qweather.com/v2/city/lookup?key=8966306e008e49ac9ea6ae9eadb6e2f7&location=%E9%95%BF%E6%B2%99')
    //   this.weatherData = res.data.location
    // }
  }

}
</script>

<style scoped lang="scss">
.tianqi{
  height: 310px;
}
.dashboard {
  background: #f5f6f8;
  width: 100%;
  min-height: calc(100vh - 80px);

  ::v-deep .el-calendar-day {
  height:  40px;
 }
 ::v-deep .el-calendar-table__row td,::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{
  border:none;
 }
.date-content {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.date-content .rest {
  color: #fff;
  border-radius: 50%;
  background: rgb(250, 124, 77);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
}
.date-content .text{
  width: 20px;
  height: 20px;
  line-height: 20px;
 display: inline-block;

}
::v-deep .el-calendar-table td.is-selected .text{
   background: #409eff;
   color: #fff;
   border-radius: 50%;
 }
 ::v-deep .el-calendar__header {
   display: none
 }
  .container {
    display: flex;
    .right {
      width: 40%;
      .panel {
        margin-left: 8px;
      }
      :nth-child(1) {
        margin-top: 0;
      }
    }
    .left {
      flex: 1;
      :nth-child(1) {
        margin-top: 0;
      }
    }
    .panel {
      background-color: #fff;

      margin-top: 8px;
      padding: 20px;
      .panel-title {
        font-size: 16px;
        color: #383c4e;
        font-weight: 500;
      }
      // 图标样式
      .panelChart {
        // width: 150px;
        height: 380px!important;
      }
      // 用户信息样式
      .user-info {
        display: flex;
        .avatar {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background-color: #d9d9d9;
          line-height: 48px;
          text-align: center;
        }
        .company-info {
          margin-left: 10px;
          height: 48px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .title {
            color: #383c4e;
            font-weight: 500;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Medium;
            span {
              font-size: 12px;
              background: #f5f6f8;
              text-align: center;
              padding: 2px 8px;
              border-radius: 2px;
              color: #697086;
            }
          }
          .depart {
            font-size: 14px;
            color: #697086;
            font-weight: 400;
          }
        }
      }
      // 代办样式
      .todo-list {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        .todo-item {
          width: 25%;
          height: 90px;
          display: flex;
          flex-direction: column;
          padding: 10px;
          justify-content: space-around;
          :nth-child(1) {
            color: #697086;
            font-size: 14px;
          }
          :nth-child(2) {
            color: #383c4e;
            font-size: 30px;
            font-weight: 500;
          }
        }
      }
      // 快捷入口
      .quick-entry {
        margin-top: 16px;
        display: flex;
        .entry-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 60px;
          &:nth-child(1) {
            margin-left: 0px;
          }
          .entry-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #f5f6f8;
            background-size: cover;
            &.approval {
              background-image: url('~@/assets/common/approval.png');
            }
             &.social {
              background-image: url('~@/assets/common/social.png');
            }
             &.salary {
              background-image: url('~@/assets/common/salary.png');
            }
            &.role {
              background-image: url('~@/assets/common/role.png');
            }
             &.bpm {
              background-image: url('~@/assets/common/bpm.png');
            }
          }
          span {
            color: #697086;
            font-size: 14px;
            margin-top: 8px;
          }
        }
      }
      // 图表数据
      .chart-container {
        display: flex;
        .chart-info {
         width: 240px;
          margin-top: 10px;
          .info-main {
            padding: 10px;
            display: flex;
            flex-direction: column;
            :nth-child(1) {
              font-size: 14px;
              color: #697086;
            }
            :nth-child(2) {
              margin-top: 10px;
              font-size: 30px;
              color: #04c9be;
              font-weight: 500;
            }
          }

          .info-list {
            background: #f5f6f8;
            border-radius: 4px;
            padding: 12px 15px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .info-list-item {
              width: 50%;
              margin-top: 10px;
              display: flex;
              flex-direction: column;

              :nth-child(1) {
                font-size: 14px;
                color: #697086;
              }
              :nth-child(2) {
                margin-top: 10px;
                font-size: 30px;
                color: #383c4e;
                font-weight: 500;
              }
            }
          }
        }
        .chart {
          flex:1
        }
      }
      // 帮助链接
      .help {
        display: flex;
        .help-left {
          width: 40%;
        }
        .help-right {
          flex: 1;
        }
        .help-list {
          .help-block {
            background: #f5f6f8;
            border-radius: 4px;
            width: 264px;
            height: 54px;
            padding: 17px 10px;
            font-size: 14px;
            color: #697086;
            margin-top: 10px;
            i {
              width: 14px;
              height: 14px;
              display: inline-block;
              background-size: cover;
              vertical-align: middle;
            }
            i.icon-help {
              background-image: url("~@/assets/common/help.png");
            }
             i.icon-support {
              background-image: url("~@/assets/common/support.png");
            }
             i.icon-add {
              background-image: url("~@/assets/common/add.png");
            }
             i.icon-entry {
              background-image: url("~@/assets/common/entry.png");
            }
          }
        }
      }
      // 通知公告
      .information-list {
        margin-top: 20px;
        .information-list-item {
          display: flex;
          align-items: center;
          margin:15px 0;
          img {
            width: 40px;
            height: 40px;
            border: 50%;
            margin-right: 13px;
          }
         .col {
           color: #8a97f8;
         }
         div :nth-child(2) {
          color: #697086;
          font-size: 14px;
         }
        }
      }
    }
  }
}
</style>
